<template>
  <view>
    <view style="position: absolute;z-index: 101;max-height: 70vh;min-height: 50vh;" @touchmove.stop.prevent="">
      <uni-popup ref="popup" type="bottom" :background-color="bgColor">
        <view class="depart-sure-cancel" style="background: var(--bg-center-color)">
          <view style="display: flex;flex-direction: row;align-items: center;">
            <view
                style="height: 28rpx;width: 10rpx;background-color: var(--grey-text);border-radius: 10rpx;">
            </view>
            <view style="font-size: 28rpx;font-weight: 600;color: var(--white-text);margin-left: 20rpx;">
              营业额：{{ formatNumber(businessData.businessMoney) || 0 }}
            </view>
          </view>
          <view style="color: var(--grey-text);font-size: 28rpx;" @click="closePopup">关闭</view>
        </view>
        <view class="line-split"></view>
        <scroll-view scroll-y style="max-height: 70vh;min-height: 50vh;" :show-scrollbar="false">
          <view>
            <view style="padding: 0 30rpx;" v-if="count_total_business.length>0">
              <view
                  style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
                <view class="performance-detail-content-detail">
                  <view class="detail-title">
                    <view style="display: flex;flex-direction: row;">
                      <view class="detail-name font-28">
                        主营：{{ formatNumber(businessData.businessMoneyList.businessYesMoney) || 0 }}
                      </view>
                    </view>
                  </view>
                  <view class="line-split"></view>
                  <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
                        v-for="(item,index) in count_total_business" :key="index">
                    <view class="detail-item" :class="{'align-end':index1 == 1}"
                          v-for="(detail,index1) in item" :key="index1">
                      <view class="label">{{ detail.payment_name }}：</view>
                      <view class="value">{{ formatNumber(detail.payment_money) || 0 }}</view>
                    </view>
                  </view>
                </view>
                <view class="depart-title-content">
                  <view class="depart-title-content-name">T5</view>
                  <view class="depart-title-content-desk">分类名称</view>
                  <view class="depart-title-content-money">收入 / 占比</view>
                </view>

                <view class="depart-title-content" v-if="businessGoodList.length>0"
                      v-for="(item,index) in businessGoodList" :key="index">
                  <view class="performance-detail-content" style="flex: 1;margin-top: 0;">
                    <view class="depart-title-content-name">
                      {{ index + 1 }}
                    </view>
                    <view class="depart-title-content-desk">
                      {{ item.sort_count_name }}
                    </view>
                    <view class="depart-title-content-money">
                      <view>{{ formatNumber(item.total_fact_money) }} / {{ item.money_rate }}%</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <view style="padding: 0 30rpx;" v-if="businessData.businessMoneyList.businessNoMoney>0">
              <view
                  style="background-color: var(--bg-center-color);border-radius: 16rpx;padding-bottom: 30rpx;">
                <view class="performance-detail-content-detail">
                  <view class="detail-title">
                    <view style="display: flex;flex-direction: row;">
                      <view class="detail-name font-28">
                        非营：{{ formatNumber(businessData.businessMoneyList.businessNoMoney) || 0 }}
                      </view>
                    </view>
                  </view>
                  <view class="line-split"></view>
                  <view class="detail-body" style="padding: 0 10rpx;height: auto;margin-top: 20rpx;"
                        v-for="(item,index) in count_total_no_business" :key="index">
                    <view class="detail-item" :class="{'align-end':index1 == 1}"
                          v-for="(detail,index1) in item" :key="index1">
                      <view class="label">{{ detail.payment_name }}：</view>
                      <view class="value">{{ formatNumber(detail.payment_money) || 0 }}</view>
                    </view>
                  </view>
                </view>
                <view class="depart-title-content">
                  <view class="depart-title-content-name">T5</view>
                  <view class="depart-title-content-desk">分类名称</view>
                  <view class="depart-title-content-money">收入 / 占比</view>
                </view>

                <view class="depart-title-content" v-if="businessNoGoodList.length>0"
                      v-for="(item,index) in businessNoGoodList" :key="index">
                  <view class="performance-detail-content" style="flex: 1;margin-top: 0;">
                    <view class="depart-title-content-name">
                      {{ index + 1 }}
                    </view>
                    <view class="depart-title-content-desk">
                      {{ item.sort_count_name }}
                    </view>
                    <view class="depart-title-content-money">
                      <view>{{ formatNumber(item.total_fact_money) }} / {{ item.money_rate }}%</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view style="text-align: center;font-size: 24rpx;color: var(--grey-text);padding: 30rpx 0;">
            更多内容请移步至分店APP助手查看
          </view>
<!--          <view style="display: flex;flex-direction: row;justify-content: center;margin-bottom: 50rpx;">-->
<!--            <view class="business-btn" @click="goAnalyse('wine')">酒水分析</view>-->
<!--            <view class="business-btn" style="margin-left: 30rpx;" @click="goAnalyse('room')">桌台分析</view>-->
<!--          </view>-->
        </scroll-view>
      </uni-popup>
    </view>
  </view>
</template>

<script>
export default {
  name: "tradeBusinessPopup",
  data() {
    return {
      bgColor: 'var(--bg-color)',
      businessData: {},
      count_total_business: [],
      count_total_no_business: [],
      betweenTime: [],
      businessGoodList: [],
      businessNoGoodList: [],
    }
  },
  mounted() {

  },
  methods: {
    goAnalyse(type) {
      this.closePopup()
      if (type == 'room') {
        uni.navigateTo({
          url: '/pages/app_helper/analysis/room_ana'
        })
        return
      }
      if (type == 'wine') {
        uni.navigateTo({
          url: '/pages/app_helper/trade/wine_income'
        })
        return
      }
    },
    opens(item, time) {
      this.count_total_business = this.groupByThree(item.businessMoneyDetail.businessYesList)
      this.count_total_no_business = this.groupByThree(item.businessMoneyDetail.businessNoList)
      this.businessData = item
      this.betweenTime = time
      this.getBusinessGoods()
      this.getNoBusinessGoods()
      this.$refs.popup.open()
    },

    /**
     * 获取营业内商品
     */
    getBusinessGoods() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00',
        is_revenue: 1
      }
      this.$commonJs.queryCache('/app/admin/getTypeIncomeMoney', params, {
        before() {
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res
            self.businessGoodList = data
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.$commonJs.systemConfig.groupShopList[self.$commonJs.systemConfig.shopIndex].shop_id})
    },

    /**
     * 获取营业外商品
     */
    getNoBusinessGoods() {
      const self = this
      const params = {
        begin_date: this.betweenTime[0] + ' 12:00:00',
        end_date: this.betweenTime[1] + ' 12:00:00',
        is_revenue: 2
      }
      this.$commonJs.queryCache('/app/admin/getTypeIncomeMoney', params, {
        before() {
        },
        success(res) {
          try {
            const {
              code,
              data,
              msg,
              server_ip
            } = res
            self.businessNoGoodList = data
          } catch (error) {
            //TODO handle the exception
            self.$commonJs.showMessage(error)
          }
        },
        fail(err) {
          self.$commonJs.logger.debug(err, 'error')
        }
      }, {"X-Merchant-ID": self.$commonJs.systemConfig.groupShopList[self.$commonJs.systemConfig.shopIndex].shop_id})
    },
    closePopup() {
      this.$refs.popup.close()
    },

    groupByThree(array) {
      const result = [];
      for (let i = 0; i < array.length; i += 2) {
        result.push(array.slice(i, i + 2));
      }
      return result;
    },

    /**
     * 格式化处理
     * @param money
     * @returns {string|*}
     */
    formatNumber(money) {
      // 判断是否为整数（即小数部分是否为 0）
      if (money % 1 === 0) {
        return Number(money).toString()
      } else {
        return Number(money).toFixed(2)
      }
    }
  }
}
</script>

<style scoped lang="less">
.business-btn {
  height: 60rpx;
  width: 170rpx;
  background-color: #ff6f3f;
  border-radius: 20rpx;
  line-height: 60rpx;
  text-align: center;
  color: #fff;
  font-size: 24rpx;
  font-weight: 600;
}

.depart-sure-cancel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 90rpx;
  line-height: 90rpx;
}

.performance-detail-content-detail {
  border-radius: 10rpx;
  padding: 0 10rpx;
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  color: var(--white-text);
  margin-top: 30rpx;
}

.detail-name {
  font-size: 28rpx;
  font-weight: 600;
  color: var(--white-text)
}

.detail-title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 68rpx;
  align-items: center;
  line-height: 68rpx;
}

.detail-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 70rpx;
}

.label {
  font-size: 24rpx;
  color: var(--grey-text);
}

.value {
  font-size: 24rpx;
  color: var(--white-text);
  font-weight: 600;
}

.detail-item {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.align-end {
  justify-content: flex-end;
}

.depart-title-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 30rpx;
  margin-top: 16rpx;
  font-size: 26rpx;
  color: var(--grey-text);
}

.depart-title-content-name {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.depart-title-content-desk {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.depart-title-content-money {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.performance-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 30rpx;
}

.performance-detail-content {
  height: 50rpx;
  background-color: var(--bg-center-color);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: var(--white-text);
  margin-top: 20rpx;
}


.performance-detail-content-desk {
  width: 20%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.performance-detail-content-money {
  width: 40%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  text-align: right;
}
</style>